<template>
  <div class="subjects-container">
    <div class="app-container">
      <el-card>
        <el-row>
          <el-col :span="22">
            <el-col
              ><el-form
                :inline="true"
                :model="formInline"
                ref="formInline"
                class="demo-form-inline"
              >
                <el-form-item label="学科名称">
                  <el-input v-model="subjectName"></el-input>
                </el-form-item>
                <el-form-item class="switch">
                  <el-button size="small" @click="eliminate">清除</el-button>
                  <el-button
                    type="primary"
                    size="small"
                    @click="ceet(subjectName)"
                    >查询</el-button
                  >
                </el-form-item>
              </el-form></el-col
            >
          </el-col>

          <el-col :span="2">
            <el-button
              class="addition"
              type="success"
              icon="el-icon-edit"
              size="small"
              @click="showDialog = true"
              >新增学科</el-button
            >
          </el-col>
        </el-row>
        <el-alert
          :title="`数据一共 ${counts} 条`"
          :closable="false"
          type="info"
          show-icon
        >
        </el-alert>
        <el-table
          :data="tableData"
          style="width: 100%; margin-top: 10px"
          :header-cell-style="{ background: '#FAFAFA' }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            :index="indexMethod"
          >
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="150">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template #default="{ row }">
              {{ row.addDate | capitalize(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="isFrontDisplay" label="前台是否显示">
            <template #default="{ row }">{{
              row.isFrontDisplay == 1 ? '是' : '否'
            }}</template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录">
          </el-table-column>
          <el-table-column prop="totals" label="题目数量"> </el-table-column>
          <el-table-column prop="address" label="操作" width="240">
            <template #default="{ row }">
              <el-button type="text" @click="tiaozhuan(row)"
                >学科分类</el-button
              >
              <el-button type="text" @click="biaoqian(row)">学科标签</el-button>
              <el-button type="text" @click="amend(row)">修改</el-button>
              <el-button type="text" @click="dell(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row :gutter="20">
          <el-col :span="11" :offset="13"
            ><div class="grid-content bg-purple">
              <el-pagination
                background
                style="margin-top: 20px; text-align: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageObj.page"
                :page-size="pageObj.pagesize"
                :page-sizes="[5, 10, 15, 20]"
                :total="counts"
                layout="prev, pager, next,sizes, jumper"
              >
              </el-pagination></div
          ></el-col>
        </el-row>
      </el-card>

      <!-- 新增学科弹出框 -->
      <el-dialog
        :title="showtitle"
        :visible="showDialog"
        width="400px"
        @close="handleClose"
      >
        <el-form
          ref="formDate"
          :model="formDate"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="学科名称" prop="subjectName">
            <el-input
              v-model="formDate.subjectName"
              placeholder="请输入学科名称"
            />
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch
              v-model="formDate.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <template #footer class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="clickSunmit()">确 定</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list, remove, add, update } from '../../api/hmmm/subjects'
import { parseTime } from '../../utils/index'
export default {
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      return parseTime(value)
    }
  },
  data () {
    return {
      isSelected: '',
      pageObj: {
        page: 1,
        pagesize: 5
      },
      counts: 0,
      formInline: {
        user: ''
      },
      subjectName: '',
      showDialog: false,
      tableData: [],
      formDate: {
        subjectName: '',
        isFrontDisplay: 1
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输学科名称',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  computed: {
    showtitle () {
      return this.formDate.id ? '修改学科' : '新增学科'
    }
  },
  created () {
    this.Alllist()
  },
  methods: {
    async Alllist () {
      const { data } = await list(this.pageObj)
      this.tableData = data.items
      this.counts = data.counts
    },
    // 改变每页显示条数，重新渲染页面
    handleSizeChange (s) {
      this.pageObj.pagesize = s
      this.pageObj.page = 1
      this.Alllist()
    },
    // 改变当前页，重新渲染页面
    handleCurrentChange (c) {
      this.pageObj.page = c
      if (this.isSelected) {
        // 筛选后做分页
        this.ceet(this.isSelected)
      } else {
        // 未筛选做分页
        this.Alllist()
      }
    },
    indexMethod (index) {
      return index + 1 + (this.pageObj.page - 1) * this.pageObj.pagesize
    },
    // 清除
    eliminate () {
      this.subjectName = ''
      this.isSelected = ''
      this.Alllist()
    },
    // 删除
    dell (row) {
      this.$confirm('确认要删除该角色吗？', '温馨提示')
        .then(async () => {
          await remove(row)
          if (this.tableData.length === 1 && this.pageObj.page > 1) {
            this.pageObj.page--
          }
          if (this.isSelected) {
            // 筛选后做删除
            this.ceet(this.isSelected)
          } else {
            this.Alllist()
          }
          this.$message.success('删除角色成功')
        })
        .catch(() => {
          console.log('取消')
        })
    },
    // 关闭
    handleClose () {
      this.showDialog = false
      this.$refs.formDate.resetFields()
      this.formDate = {
        id: '',
        subjectName: '',
        isFrontDisplay: false
      }
    },
    // 添加
    clickSunmit () {
      this.$refs.formDate.validate(async (flag) => {
        if (!flag) return
        if (this.formDate.id) {
          await update(this.formDate)
          this.$message.success('修改成功')
        } else {
          await add(this.formDate)
          this.$message.success('添加成功')
        }
        // 关闭弹框
        this.handleClose()
        this.Alllist()
      })
    },
    // 查询
    async ceet (subjectName) {
      this.pageObj.page = 1
      if (subjectName) {
        this.isSelected = subjectName
        const {
          data: { counts, items }
        } = await list({ ...this.pageObj, subjectName })
        this.tableData = items
        this.counts = counts
      } else {
        this.isSelected = ''
        this.Alllist()
      }
      // this.subjectName = ''
    },
    // 修改
    async amend (row) {
      this.showDialog = true
      this.formDate = { ...row }
      if (this.formDate.isFrontDisplay === 1) {
        this.formDate.isFrontDisplay = true
      } else {
        this.formDate.isFrontDisplay = false
      }
    },
    // 路由
    // 学科分类
    tiaozhuan (row) {
      console.log(row)
      this.$router.push({
        path: 'directorys',
        query: { id: row.id, name: row.subjectName }
      })
    },
    // 学科标签
    biaoqian (row) {
      console.log(row)
      this.$router.push({
        path: 'tags',
        query: { id: row.id, name: row.subjectName }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
</style>
